<template>
  <div class="flex-center" style="background-color: #333;width: 100%;height: 100%;padding: 20px;box-sizing: border-box">
    <div class="container">
      <div class="flex-center" @click="start(item)" :class="{ turnItem: item !== '抽奖', click: item === '抽奖', isActive: init === index }" v-for="(item, index) in list" :key="item">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [1, 2, 3, 8, '抽奖', 4, 7, 6, 5],
      numList: [0, 1, 2, 4, 7, 6, 5, 3], // 显示列表
      rollCount: 0, // 转动次数
      cycle: 20, // 转动基数
      count: 8, // 奖品个数
      curIndex: 0, // index
      showIndex: 0, // 转动显示Index
      speed: 200,
      prize: null,
      timer: null,
      init: 0
    }
  },
  methods: {
    start (e) {
      if (e === '抽奖') {
        this.rollCount += 1
        if (this.rollCount > this.cycle + 10 && this.prize === this.curIndex) {
          clearTimeout(this.timer)
          this.timer = null
          this.rollCount = 0
          this.speed = 200
        } else {
          const domList = document.querySelectorAll('.turnItem')
          this.oneRoll()
          this.showIndex = this.numList[this.curIndex]
          domList[this.showIndex].classList.add('isActive')
          this.$utils.common.siblings(domList[this.showIndex]).forEach(e => {
            e.classList.remove('isActive')
          })
          if (this.rollCount < this.cycle) {
            this.speed -= 10
          } else if (this.rollCount === this.cycle) {
            let target = (Math.random() * 7).toFixed()
            this.prize = +target
          } else if (this.rollCount > this.cycle) {
            this.speed += 100
          }
          this.timer = setTimeout(() => {
            this.start('抽奖')
          }, this.speed)
        }
      }
    },
    oneRoll () {
      let index = this.curIndex // 当前转动到哪个位置
      const count = this.count // 总共有多少个位置
      index += 1
      if (index > count - 1) {
        index = 0
      }
      this.curIndex = index
    }
  }
}
</script>

<style lang="less" scoped>
@import "Index";
</style>
